
<template>
  <view class="page">
    <view class="container">
      <!-- 基础信息区域 -->
      <view class="section">
        <view class="input-item">
          <text class="label">工程项目</text>
          <view class="select-wrapper">
            <uni-data-select
              v-model="projectValue"
              :localdata="projectOptions"
              placeholder="请选择"
              @change="handleProjectChange"
            />
            <uni-icons type="plusempty" @click="goProject" size="16" color="#666666" class="plus-icon cursor-pointer" />
          </view>
        </view>
		
        <view class="input-item">
          <text class="label">车站/区间</text>
          <view class="select-wrapper">
            <uni-data-select
              v-model="stationValue"
              :localdata="stationOptions"
              placeholder="请选择"
              @change="handleStationChange"
            />
            <uni-icons type="plusempty" size="16" color="#666666" class="plus-icon cursor-pointer" />
          </view>
        </view>
        <view class="input-item">
          <text class="label">支柱杆号</text>
          <uni-easyinput v-model="poleNumber" placeholder="请输入" />
        </view>
      </view>
	  
	 

      <!-- 参数输入区域 -->
      <view class="section">
        <view class="input-item">
          <text class="label">侧面限界(mm)</text>
          <view class="input-with-unit">
            <uni-easyinput v-model="sideLimit" placeholder="请输入" />
            <uni-icons type="right" size="16" color="#666666" />
          </view>
        </view>
        <view class="input-item">
          <text class="label">支柱斜率(mm/米)</text>
          <view class="input-with-unit">
            <uni-easyinput v-model="poleSlope" placeholder="外倾为正，内倾为负" />
            <uni-icons type="right" size="16" color="#666666" />
          </view>
        </view>
        <view class="input-item">
          <text class="label">外轨超高(mm)</text>
          <view class="input-with-unit">
            <uni-easyinput v-model="outerRailHeight" placeholder="向外为正，向内为负" />
            <uni-icons type="right" size="16" color="#666666" />
          </view>
        </view>
        <view class="input-item">
          <text class="label">拉出值(mm)</text>
          <view class="input-with-unit">
            <uni-easyinput v-model="pulloutValue" placeholder="请输入" />
            <uni-icons type="right" size="16" color="#666666" />
          </view>
        </view>
        <view class="input-item">
          <text class="label">承力索高(mm)</text>
          <view class="input-with-unit">
            <uni-easyinput v-model="cableHeight" placeholder="请输入" />
            <uni-icons type="right" size="16" color="#666666" />
          </view>
        </view>
        <view class="input-item">
          <text class="label">导线高(mm)</text>
          <view class="input-with-unit">
            <uni-easyinput v-model="wireHeight" placeholder="请输入" />
            <uni-icons type="right" size="16" color="#666666" />
          </view>
        </view>
        <view class="input-item">
          <text class="label">上底座高(mm)</text>
          <view class="input-with-unit">
            <uni-easyinput v-model="upperBaseHeight" placeholder="请输入" />
            <uni-icons type="right" size="16" color="#666666" />
          </view>
        </view>
        <view class="input-item">
          <text class="label">底座间距(mm)</text>
          <view class="input-with-unit">
            <uni-easyinput v-model="baseSpacing" placeholder="请输入" />
            <uni-icons type="right" size="16" color="#666666" />
          </view>
        </view>
      </view>

      <!-- 选择区域 -->
      <view class="section">
        <view class="input-item">
          <text class="label">底座类型</text>
          <view class="select-wrapper">
            <uni-data-select
              v-model="baseType"
              :localdata="baseTypeOptions"
              placeholder="请选择"
            />
            <uni-icons type="plusempty" @click="goWbdz" size="16" color="#666666" class="plus-icon cursor-pointer" />
          </view>
        </view>
        <view class="input-item">
          <text class="label">绝缘子类型</text>
          <view class="select-wrapper">
            <uni-data-select
              v-model="insulatorType"
              :localdata="insulatorTypeOptions"
              placeholder="请选择"
            />
            <uni-icons type="plusempty" @click="goWbjyz" size="16" color="#666666" class="plus-icon cursor-pointer" />
          </view>
        </view>
        <view class="input-item">
          <text class="label">定位器类型</text>
          <view class="select-wrapper">
            <uni-data-select
              v-model="positionerType"
              :localdata="positionerTypeOptions"
              placeholder="请选择"
            />
            <uni-icons type="plusempty" size="16" color="#666666" class="plus-icon cursor-pointer" />
          </view>
        </view>
        <view class="switch-item">
          <text class="label">定位方式</text>
          <uni-data-checkbox
            v-model="positionType"
            :localdata="positionOptions"
            mode="button"
            @change="handlePositionChange"
          />
        </view>
        <view class="switch-item">
          <text class="label">腕臂支撑</text>
          <uni-data-checkbox
            v-model="armSupport"
            :localdata="armSupportOptions"
            mode="button"
            @change="handleArmSupportChange"
          />
        </view>
        <view class="switch-item">
          <text class="label">支撑斜拉</text>
          <uni-data-checkbox
            v-model="supportType"
            :localdata="supportTypeOptions"
            mode="button"
          />
        </view>
        <view class="switch-item">
          <text class="label">防风拉线</text>
          <uni-data-checkbox
            v-model="windResistance"
            :localdata="windResistanceOptions"
            mode="button"
          />
        </view>
      </view>

      <!-- 底部说明与按钮 -->
      <view class="footer">
        <view class="tips">
          <text class="tip-item">1、该计算适用通化2009-1006中间柱、道岔柱、非弱段关节计算及部分设计防腕臂计算。</text>
          <text class="tip-item">2、如果不确定，请联系客服。</text>
        </view>
      </view>
    </view>

    <!-- 底部导航栏 -->
    <view class="tab-bar">
      <view class="tab-item cursor-pointer" @click="goWbrm">
        <text class="tab-text">参数</text>
      </view>
      <view class="tab-item cursor-pointer">
        <text class="tab-text">设计</text>
      </view>
      <view class="tab-item cursor-pointer">
        <text class="tab-text">修正</text>
      </view>
      <view class="calculate-btn cursor-pointer" @click="handleCalculate">
        <text class="btn-text">计算</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

// 工程项目选项
const projectOptions = ref([
  { value: 1, text: '项目A' },
  { value: 2, text: '项目B' },
  { value: 3, text: '项目C' },
]);

// 车站选项
const stationOptions = ref([
  { value: 1, text: '站点A' },
  { value: 2, text: '站点B' },
  { value: 3, text: '站点C' },
]);

// 底座类型选项
const baseTypeOptions = ref([
  { value: 1, text: '底座类型A' },
  { value: 2, text: '底座类型B' },
  { value: 3, text: '底座类型C' },
]);

// 绝缘子类型选项
const insulatorTypeOptions = ref([
  { value: 1, text: '绝缘子A' },
  { value: 2, text: '绝缘子B' },
  { value: 3, text: '绝缘子C' },
]);

// 定位器类型选项
const positionerTypeOptions = ref([
  { value: 1, text: '定位器A' },
  { value: 2, text: '定位器B' },
  { value: 3, text: '定位器C' },
]);

// 定位方式选项
const positionOptions = ref([
  { value: 1, text: '正定位' },
  { value: 2, text: '反定位' },
]);

// 腕臂支撑选项
const armSupportOptions = ref([
  { value: 1, text: '有' },
  { value: 2, text: '无' },
]);

// 支撑斜拉选项
const supportTypeOptions = ref([
  { value: 1, text: '支撑' },
  { value: 2, text: '斜拉' },
  { value: 3, text: 'V拉' },
]);

// 防风拉线选项
const windResistanceOptions = ref([
  { value: 1, text: '有' },
  { value: 2, text: '无' },
]);

// 表单数据
const projectValue = ref('');
const stationValue = ref('');
const poleNumber = ref('');
const sideLimit = ref('');
const poleSlope = ref('');
const outerRailHeight = ref('');
const pulloutValue = ref('');
const cableHeight = ref('');
const wireHeight = ref('');
const upperBaseHeight = ref('');
const baseSpacing = ref('');
const baseType = ref('');
const insulatorType = ref('');
const positionerType = ref('');
const positionType = ref(1);
const armSupport = ref(1);
const supportType = ref(1);
const windResistance = ref(1);

// 处理项目变化
const handleProjectChange = (value: string) => {
  console.log('项目选择:', value);
};

// 处理站点变化
const handleStationChange = (value: string) => {
  console.log('站点选择:', value);
};

// 处理定位方式变化
const handlePositionChange = (value: number) => {
  console.log('定位方式:', value);
};

// 处理腕臂支撑变化
const handleArmSupportChange = (value: number) => {
  console.log('腕臂支撑:', value);
};

// 跳转到新建工程界面
const goProject =() =>{
	uni.navigateTo({
		url:'/pages/project/projectList'
	})
}

// 跳转到腕臂参数界面
const goWbrm =() =>{
	uni.navigateTo({
		url:'/pages/wanbi/wbrm'
	})
}
const goWbdz=() =>{
	uni.navigateTo({
		url:'/pages/wanbi/wbdz/wbdz'
	})
}
const goWbjyz=() =>{
	uni.navigateTo({
		url:'/pages/wanbi/wbjyz/wbjyz'
	})
}

// 处理计算按钮点击
const handleCalculate = () => {
  if (!projectValue.value) {
    uni.showToast({
      title: '请选择工程项目',
      icon: 'none'
    });
    return;
  }
  if (!stationValue.value) {
    uni.showToast({
      title: '请选择车站/区间',
      icon: 'none'
    });
    return;
  }
  if (!sideLimit.value) {
    uni.showToast({
      title: '请输入侧面限界',
      icon: 'none'
    });
    return;
  }
  if (!pulloutValue.value) {
    uni.showToast({
      title: '请输入拉出值',
      icon: 'none'
    });
    return;
  }
  // 执行计算逻辑
  console.log('开始计算');
};
</script>

<style>
page {
  height: 100%;
}

.page {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

.container {
  flex: 1;
  overflow: auto;
  padding: 0 30rpx;
}

.section {
  background: #ffffff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin: 20rpx 0;
}

.input-item {
  padding: 20rpx 0;
  border-bottom: 1px solid #eee;
}

.input-item:last-child {
  border-bottom: none;
}

.label {
  font-size: 14px;
  color: #333333;
  margin-bottom: 16rpx;
  display: block;
  width: 100%;
}

.input-with-unit {
  display: flex;
  align-items: center;
}

.select-wrapper {
  display: flex;
  width: 100%;
  align-items: center;
}

.select-wrapper :deep(.uni-data-select) {
  flex: 1;
}

.plus-icon {
  margin-left: 10rpx;
  width: 16px;
  height: 16px;
}

.switch-item {
  padding: 20rpx 0;
  border-bottom: 1px solid #eee;
}

.switch-item:last-child {
  border-bottom: none;
}

.footer {
  /* padding: 30rpx 0; */
}

.tips {
  /* padding: 20rpx; */
}

.tip-item {
  font-size: 12px;
  color: #999999;
  line-height: 1.5;
  display: block;
  margin-bottom: 10rpx;
}

.tab-bar {
  height: 100rpx;
  background: #ffffff;
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
}

.tab-item {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.tab-text {
  font-size: 14px;
  color: #666666;
}

.calculate-btn {
  width: 200rpx;
  height: 80rpx;
  background: #2979ff;
  border-radius: 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 20rpx;
}

.btn-text {
  color: #ffffff;
  font-size: 16px;
}

.cursor-pointer {
  cursor: pointer;
}
</style>